<template>
  <FormItemWrapper :component="component">
    <RadioGroup v-model="formData[component.compConfigData.fieldConfig.bindingFieldName]"
                :type="radioGroupType"
                :size="component.compConfigData.widgetConfig.size"
                :vertical="component.compConfigData.widgetConfig.vertical"
                @on-change="onChangeHandler"
    >
      <Radio :label="radio.value"
             :key="index"
             v-for="(radio, index) in component.compConfigData.widgetConfig.radios"
             :disabled="radio.disabled"
      >
        {{radio.label}}
      </Radio>
    </RadioGroup>
  </FormItemWrapper>
</template>

<script>
import FormLayoutCommonUtil from "@/utils/FormLayoutCommonUtil";
import FormWidgetMixin from "@/mixin/FormWidgetMixin";

export default {
  name: "FormItemRadioWidget",
  mixins: [FormWidgetMixin],
  attr: {
    version: '1.0',
    configDataTemp: Object.assign({

      fieldConfig: FormLayoutCommonUtil.buildWidgetFieldConfig(),
      formItemConfig: FormLayoutCommonUtil.buildFormItemConfig({}, '单选框'),
      widgetConfig: {
        type: 'default',
        size: 'default',
        vertical: false,
        radios: [
          {label: '男', value: '男', disabled: false},
          {label: '女', value: '女', disabled: false}
        ]
      },
      widgetEventCodeConfig: FormLayoutCommonUtil.buildWidgetEventCodeConfig({
        onChange: {remark: '数据改变时触发', resultValues: ['value'], code: ''},
      })

    })
  },
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.runWidgetOnMountedEventCode()
    },

    onChangeHandler(value) {
      this.runWidgetEventCode('onChange', (fn)=>{
        fn.call(this, value)
      })
    },
  },
  computed: {
    radioGroupType() {
      return this.component.compConfigData.widgetConfig.type == 'default' ? undefined : this.component.compConfigData.widgetConfig.type
    }
  },
  watch: {}
}
</script>

<style scoped>

</style>
